<template>
  <div style="text-align: center">
    <div class="nav">
      <a 
        href="#" 
        @click="mycomp = 'login'">账号登录</a>
      <a 
        href="#" 
        @click="mycomp = 'qrcode'">二维码登录</a>
    </div>

    <Transition
      enter-active-class="animate__animated animate__rubberBand"
      leave-active-class="animate__animated animate__backOutDown"
      mode="out-in"
    >
      <login-tem v-if="mycomp === 'login'"></login-tem>
      <qrcode-tem v-else-if="mycomp === 'qrcode'"></qrcode-tem>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from "vue";
import "./assets/animate.css";
import loginTem from "./components/loginTem.vue";
import qrcodeTem from "./components/qrcodeTem.vue";

const mycomp = ref("login");
</script>

<style>
.nav {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid rgb(71, 20, 20);
  color: #333;
  text-decoration: none;
}

.nav a:first-of-type {
  border: 0;
}
</style>